/** @author: duanhaijiao  @date 2022/7/10--17:06 **/

/* name: "pdf" */
<!-- 预览PDF -->

    <template>
        <el-dialog  :visible.sync="previewDialog">
        <div>
            <div class="tools">
                <el-button :theme="'default'" type="submit" :title="'上一页'" @click.stop="prePage" class="mr10"> 上一页</el-button>
                <el-button :theme="'default'" type="submit" :title="'下一页'" @click.stop="nextPage" class="mr10"> 下一页</el-button>
                <div class="page">{{pageNum}}/{{pageTotalNum}} </div>
                <el-button :theme="'default'" type="submit" :title="'顺时针旋转'" @click.stop="clock" class="mr10"> 顺时针旋转</el-button>
                <el-button :theme="'default'" type="submit" :title="'逆时针旋转'" @click.stop="counterClock" class="mr10"> 逆时针旋转</el-button>
                <el-button :theme="'default'" type="submit" :title="'打印'" @click.stop="pdfPrintAll" class="mr10"> 打印</el-button>
            </div>
            <pdf ref="pdf" :src="url" :page="pageNum" :rotate="pageRotate" @progress="loadedRatio = $event" @page-loaded="pageLoaded($event)"
                 @num-pages="pageTotalNum=$event" @error="pdfError($event)"  @link-clicked="page = $event"></pdf>
        </div>
        </el-dialog>
    </template>

<script>
    import pdf from 'vue-pdf'
    export default {
        components:{
            pdf,
        },
        data() {
            return {
                previewDialog: false,
                url: "http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf",
                pageNum: 1,
                pageTotalNum: 1,
                pageRotate: 0,
                // 加载进度
                loadedRatio: 0,
                curPageNum: 0,
            }
        },
                methods:{
                /**
                 * 预览PDF
                 */
                previewPDF(row,index) {
                    this.previewDialog = true;
                    console.log("", row,index);

                },
                // 上一页函数，
                prePage() {
                    var page = this.pageNum
                    page = page > 1 ? page - 1 : this.pageTotalNum
                    this.pageNum = page
                },
                // 下一页函数
                nextPage() {
                    var page = this.pageNum
                    page = page < this.pageTotalNum ? page + 1 : 1
                    this.pageNum = page
                },
                // 页面顺时针翻转90度。
                clock() {
                    this.pageRotate += 90
                },
                // 页面逆时针翻转90度。
                counterClock() {
                    this.pageRotate -= 90
                },
                // 页面加载回调函数，其中e为当前页数
                pageLoaded(e) {
                    this.curPageNum = e
                },
                // 错误时回调函数。
                pdfError(error) {
                    console.error(error)
                },
                // 打印全部
                pdfPrintAll() {
                    /**
                     * 打印界面字符乱码是因为你pdf中使用了自定义字体导致的,谷歌浏览器打印的时候预览界面真的变成了真·方块字 ,解决方案如下：
                     * 用文章最后的pdfjsWrapper.js在替换掉node_modules/vue-pdf/src/pdfjsWrapper.js
                     */
                    console.log("打印");
                    this.$refs.pdf.print()
                },

            },
        }
</script>


